{% extends 'base.html' %}
{% block content %}
    <h3>修改头像</h3>
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <p>原头像:
            <img src="media/{{ request.user.avatar }}" alt="" width="200px">
        </p>
        <p>新头像:
            <label for="myfile">
                {% load static %}
                <img src="{% static 'images/default.png' %}" alt="" width="200px" id="myimg">
            </label>
            <input type="file" name="avatar" style="display:none;" id="myfile">
        </p>
        <input type="submit" class="btn btn-primary" value="修改">
    </form>
{% endblock %}
{% block js %}
    <script>
        $('#myfile').change(function () {
            let fileReaderObj = new FileReader();
            let fileObj = $(this)[0].files[0];
            fileReaderObj.readAsDataURL(fileObj)
            fileReaderObj.onload = function () {
                $('#myimg').attr('src', fileReaderObj.result)
            }
        })
    </script>
{% endblock %}